/*
  学习目标：使用react-redux连接库，简化redux在React中的使用

  0. npm i react-redux
  1. 在 react-redux 导入 Provider 组件，按照文档配置 
      <Provider store={store}> <App /> </Provider>
      这样其他组件都能够和 store 进行交互
  
  2. 通过 useSelector 获取state
  语法： useSelect(函数)
  注意：💥useSelector在源码内部处理了state.count的监听，并且同步给React，让Reacg驱动视图

  3. 通过 useDispatch，获取dispatch，触发dispatch
*/

import { useState } from 'react';
import { useDispatch, useSelector } from 'react-redux';

export default function App() {
  const [show, setShow] = useState(true);
  return (
    <div>
      <h1>Redux基础案例</h1>
      <button onClick={() => setShow(!show)}>点击切换卸载挂载</button>
      {show ? <Son /> : null}
    </div>
  );
}

function Son() {
  // 2. 通过useSelector 获取state
  // 语法： useSelector(函数)
  // 优化： 需要用到什么数据，就解构什么数据即可
  // 注意：💥useSelector在源码内部 创建了 当前组件Son 的状态，并且和 全局 store 关联起来
  const { count } = useSelector((state) => state);
  console.log('count -----> ', count);

  // 3. 通过 useDispatch() ，返回 dispatch，触发dispatch
  const dispatch = useDispatch();

  return (
    <div>
      <h2>子组件</h2>
      <h2>count:{count}</h2>
      <button onClick={() => dispatch({ type: 'add' })}>+1</button>
      <button onClick={() => dispatch({ type: 'des' })}>-1</button>
    </div>
  );
}
